<template>
    <div class="header-container">
        <div class="logo pull-left">
            <router-link to="/"></router-link>
        </div>
        <div class="mini-cart-button h100 pull-right" @click.stop="openCart()">
            <a href="javascript:;" class="text-uppercase">
                <i class="icon-cart"></i>
                <span class="middle">Cart</span>
                <span class="count middle">(3)</span>
            </a>
        </div>
        <div class="search-button h100 pull-right" :class="{ 'active':isShowSearch} " @click="openSearch">
            <a href=" javascript:; ">
                <i :class="isShowSearch ? 'icon-close' : 'icon-sousuo'"></i>
            </a>
        </div>
        <div class="login-button h100 pull-right">
            <router-link to="/customer/register" class="text-uppercase">
                <i class="icon-denglu"></i>
                <span class="middle">Sign In</span>
            </router-link>
        </div>
        <div class="menu-button h100 pull-right" :class="{ 'active':isMenuShow} " @click.stop="openMenu()">
            <a href="javascript:;">
                <i :class="isMenuShow ? 'icon-close' : 'icon-menu'"></i>
            </a>
        </div>
        <div class="search-bar h100 pull-right" :class="{ 'active':isShowSearch}">
            <div class="form-search" v-pre>
                <input id="search" type="text" name="q" value="" class="input-text" autocomplete="off" placeholder="Search" />
                <button type="submit" class="button">
                    <span class="icon-sousuo"></span>
                </button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isShowSearch: false
        }
    },
    props: ['isMenuShow'],
    methods: {
        openMenu(evt) {
            this.isShowSearch = false
            this.$parent.isMenuShow = !this.$parent.isMenuShow
        },
        openSearch() {
            this.isShowSearch = !this.isShowSearch
        },
        openCart(evt) {
            this.$emit('openCart')
        }
    }
}
</script>
<style scoped>
.header-container [class*="-button"] a {
    display: inline-block;
    color: #fff;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 300;
}

.header-container [class*="-button"].active {
    background-color: #2e2e2e;
}

.search-bar {
    padding: 0 10px;
    background-color: #565656;
}

.search-bar button.button {
    border: none;
    background: none;
    color: #fff;
}

.search-bar input.input-text {
    height: 42px;
    border: none;
    color: #fff;
    background: none;
}

.search-bar input::-webkit-input-placeholder {
    color: #fff;
    opacity: 1;
}

.search-bar input:-moz-placeholder {
    color: #fff;
    opacity: 1;
}

.search-bar input::-moz-placeholder {
    color: #fff;
    opacity: 1;
}

.search-bar input:-ms-input-placeholder {
    color: #fff;
    opacity: 1;
}

@media (max-width: 991px) {
    .header-container {
        width: 100%;
        height: 50px;
    }
    .header-container [class*="-button"] a {
        padding: 0 15px;
        line-height: 50px;
        font-size: 0;
    }
    .header-container [class*="-button"] a:before {
        font-size: 18px;
    }
    .header-container [class*="-button"] {
        border-left: 2px solid #2e2e2e;
    }
    .search-bar input.input-text {
        width: 100%;
        height: 50px;
    }
    .search-bar {
        width: 100%;
        position: absolute;
        top: 50px;
        left: 0;
        z-index: 10;
        -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: top;
        -ms-transform-origin: top;
        transform-origin: top;
    }
    .search-bar.active {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
    }
    .search-bar input.input-text {
        padding-right: 25px;
    }
    .search-bar button.button {
        position: absolute;
        right: 5px;
        top: 14px;
    }
}

@media (min-width: 992px) {
    .header-container {
        height: 42px;
    }
    .header-container [class*="-button"] a {
        padding: 0 20px;
        line-height: 42px;
    }
    .header-container [class*="-button"] a:before {
        margin-right: 5px;
    }
    .logo a {
        margin-top: 11px;
    }
}
</style>
